<template>
  <div style="background-color: rgb(239, 239, 244)">
    <div style="
        background-color: rgb(249, 249, 249);
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      ">
      <div style="width: 70%; display: flex">
        <div class="el-icon-shopping-cart-2" style="font-size: 36px; margin-left: 20px; color: rgb(150, 53, 138)"></div>
        <div style="font-size: 20px; margin-top: 5px; margin-left: 20px">
          采购订单
        </div>
      </div>
      <div style="width: 30%">
        <div>
          <img src="../../assets/img/sq.png" alt="" style="background-color: rgb(200, 200, 200); float: right" />
        </div>
      </div>
    </div>
    <div style="display: flex; align-items: center; margin-top: 20px">
      <div style="margin-left: 30px">采购编号:</div>
      <div style="margin-left: 10px">
        <el-input prefix-icon="el-icon-search" v-model="input1"> </el-input>
      </div>
      <div style="margin-left: 30px">相关项目:</div>
      <div style="margin-left: 10px">
        <el-input prefix-icon="el-icon-search" v-model="input2"> </el-input>
      </div>
      <div style="margin-left: 30px">供应商:</div>
      <div style="margin-left: 10px">
        <el-input v-model="input3"> </el-input>
      </div>
      <div style="margin-left: 50px">
        <el-button type="primary" @click="queryData">查询</el-button>
      </div>
      <div style="margin-left: 50px">
        <el-button type="primary" @click="resetData">重置</el-button>
      </div>

      <div style="margin-left: 50px">
        <el-button type="primary" @click="add()">新增</el-button>
      </div>

    </div>
    <div style="
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        height: 100px;
      ">
      <div style="
          display: flex;
          justify-content: space-between;
          width: 24%;
          background-color: #fff;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          align-items: center;
        ">
        <div style="height: 80px">
          <div style="margin-top: 10px; margin-left: 10px">采购订单数量</div>
          <div style="font-size: 24px; margin-top: 10px; margin-left: 10px">
            28
          </div>
        </div>
        <div class="el-icon-s-order" style="font-size: 48px; margin-right: 10px"></div>
      </div>
      <div style="
          display: flex;
          justify-content: space-between;
          width: 24%;
          background-color: #fff;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          align-items: center;
        ">
        <div style="height: 80px">
          <div style="margin-top: 10px; margin-left: 10px">采购费用合计</div>
          <div style="font-size: 24px; margin-top: 10px; margin-left: 10px">
            18131600.00
          </div>
        </div>
        <div class="el-icon-money" style="font-size: 48px; margin-right: 10px"></div>
      </div>
      <div style="
          display: flex;
          justify-content: space-between;
          width: 24%;
          background-color: #fff;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          align-items: center;
        ">
        <div style="height: 80px">
          <div style="margin-top: 10px; margin-left: 10px">入库匹配</div>
          <div style="font-size: 24px; margin-top: 10px; margin-left: 10px">
            4
          </div>
        </div>
        <div class="el-icon-success" style="font-size: 48px; margin-right: 10px"></div>
      </div>
      <div style="
          display: flex;
          justify-content: space-between;
          width: 24%;
          background-color: #fff;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          align-items: center;
        ">
        <div style="height: 80px">
          <div style="margin-top: 10px; margin-left: 10px">发票匹配</div>
          <div style="font-size: 24px; margin-top: 10px; margin-left: 10px">
            1
          </div>
        </div>
        <div class="el-icon-circle-check" style="font-size: 48px; margin-right: 10px"></div>
      </div>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="purchaseId" label="采购编号"> </el-table-column>
        <el-table-column prop="relevantData" label="相关项目"> </el-table-column>
        <el-table-column prop="applicant" label="申请人"> </el-table-column>
        <el-table-column prop="applyTime" label="申请日期"> </el-table-column>
        <el-table-column prop="supplier" label="供应商"> </el-table-column>
        <el-table-column prop="purchaseCost" label="采购费用"> </el-table-column>
        <el-table-column prop="remarks" label="备注"> </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="up(scope.row)" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" @click="open(scope.row)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :title="titles" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="采购编号:" :label-width="formLabelWidth">
            <el-input v-model="form.purchaseId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="相关项目:" :label-width="formLabelWidth">
            <el-input v-model="form.relevantData" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="申请人:" :label-width="formLabelWidth">
            <el-input v-model="form.applicant" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="申请日期:" :label-width="formLabelWidth">
            <el-input v-model="form.applyTime" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="供应商:" :label-width="formLabelWidth">
            <el-input v-model="form.supplier" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="采购费用:" :label-width="formLabelWidth">
            <el-input v-model="form.purchaseCost" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注:" :label-width="formLabelWidth">
            <el-input v-model="form.remarks" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="suer">确 定</el-button>
        </div>
      </el-dialog>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage2" :page-sizes="[10, 20, 30, 40]" :page-size="10"
        layout="sizes, prev, pager, next" :total="100">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { list, submit, del, add } from '../../api/login';
export default {
  mounted() {
    this.queryData()
  },
  data() {
    return {
      input1: null,
      input2: null,
      input3: null,
      //之前静态数据
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      // 弹出新增或者修改的对话框
      dialogFormVisible: false,
      form: {
        purchaseRequisitionsId: '',
        purchaseId: "",
        relevantData: "",
        applicant: "",
        applyTime: "",
        supplier: "",
        purchaseCost: "",
        remarks: ""
      },
      // 新增或者修改采购单的标题
      titles: "",
      formLabelWidth: '120px'
    };
  },
  methods: {
    cancel() {
      this.dialogFormVisible = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.queryData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryData()
    },
    queryData() {
      let data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        purchaseId: this.input1,
        relevantData: this.input2,
        supplier: this.input3
      }
      list(data).then(res => {
        console.log(data);
        this.tableData = res.data.items
      })
    },
    resetData() {
      this.pageNum = 1,
        this.pageSize = 10,
        this.input1 = null,
        this.input2 = null,
        this.input3 = null,
        this.queryData();
    },
    open(row) {
      let id = row.purchaseRequisitionsId
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(id).then(res => {
          console.log(res);
          this.queryData();
        })
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    up(row) {
      this.titles = '修改采购单';
      this.form.purchaseRequisitionsId = row.purchaseRequisitionsId,
      this.form.purchaseId = row.purchaseId,
      this.form.relevantData = row.relevantData,
      this.form.applicant = row.applicant,
      this.form.applyTime = row.applyTime,
      this.form.supplier = row.supplier,
      this.form.purchaseCost = row.purchaseCost,
      this.form.remarks = row.remarks,
      this.dialogFormVisible = true;
    },
    suer() {
      let data = {
        purchaseRequisitionsId: this.form.purchaseRequisitionsId,
        purchaseId: this.form.purchaseId,
        relevantData: this.form.relevantData,
        applicant: this.form.applicant,
        applyTime: this.form.applyTime,
        supplier: this.form.supplier,
        purchaseCost: this.form.purchaseCost,
        remarks: this.form.remarks
      }
      if (this.titles === "修改采购单"){
        submit(data).then(res => {
          this.dialogFormVisible = false;
          console.log(res);
          this.queryData();
        })
      }
      if (this.titles === "新增"){
        // add(data).then(res => {
        //   this.dialogFormVisible = false;
        //   console.log(res);
        //   this.queryData();
        // })

        
        add(data).then(res => {
          if (res.success) { // 假设 res 中有一个 success 字段表示操作是否成功
            this.dialogFormVisible = false;
            console.log(res);
            this.queryData();
            this.$message({
              message: '添加成功',
              type: 'success'
            });
          } else {
            this.$message.error('添加失败，请重试');
          }
        }).catch(error => {
          console.error('添加记录时发生错误：', error);
          this.$message.error('添加失败，请重试');
        });


      }
      
    },
    add() {
      this.titles = '新增';
      this.form = {
        purchaseRequisitionsId: '',
        purchaseId: "",
        relevantData: "",
        applicant: "",
        applyTime: "",
        supplier: "",
        purchaseCost: "",
        remarks: ""
      };
      this.dialogFormVisible = true;
    }
  }
};
</script>
